<template>
  <div class="table_div">
    <table
      id="tableId"
      class="table_style bill_mask_back_view"
      @focusin="gridOnFocus"
      @focusout="gridOnBlur"
      @keydown="gridOnKeyDown"
      @keyup="gridOnKeyUp"
      @resize="tblresize"
      cellspacing="0"
      cellpadding="0"
      style="border-spacing: 0"
    >
      <!-- <div v-if="tableDisabled" class="bill_mask_view"></div> -->
      <thead>
        <tr class="first_tr">
          <th
            v-for="(item, index) in TableConfig.columnData"
            :key="index"
            :id="item.props"
            style="position: relative;"
            :style="styleWidth(item)"
          >
            <div v-if="item.morenName == '条形码'" style="display: flex; justify-content: center; align-items: center">
              <span v-if="item.zidingyiName">{{ item.zidingyiName }}</span>
              <div v-else style="display: flex; align-items: center">
                <img src="@assets/bill_scan.png" />
                <span style="color: #0089ff; font-size: 12px">扫码</span>
              </div>
            </div>
            <div v-else-if="item.isCheckHead" style="height: 16px">
              <input
                :class="classColor(item)"
                type="checkbox"
                v-model="allChecked"
                @change="handleAllCheck"
                class="inpu_checkbox"
                :disabled="isEdit"
              />
            </div>
            <template v-else>
              <p v-if="item.isRequired">
                <span class="star">*</span>
                {{ item.zidingyiName ? item.zidingyiName : item.morenName }}
              </p>
              <p v-else>{{ item.zidingyiName ? item.zidingyiName : item.morenName }}</p>
            </template>
            <!-- <div v-if="item.props=='goodsName'" class="resizer" id="resizer"></div> -->
            <div v-if="(item.isShow || item.zidingyiState) && item.props=='goodsName'" class="resizer" id="resizer"></div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="(item, index) in TableConfig.tableData"
          :key="index"
          :class="index == showbackGroundStyle && !tableDisabled ? 'active_backGround' : ''"
          @focusin="showbackGroundStyle = index"
          @mousemove="showbackGroundStyle = index"
          @mouseleave="showbackGroundStyle = -1"
        >
          <td v-for="(v, k) in TableConfig.columnData" :key="k" :style="styleWidth(v)">
            <template v-if="k == 'idx'">
              <div class="first_td">
                <div v-if="showbackGroundStyle == index && !tableDisabled && !isEdit" class="first_td_button">
                  <i @click.stop="addRow($event, index)" class="el-icon-circle-plus-outline"></i>
                  <i @click="deleteRow(index)" class="el-icon-remove-outline"></i>
                </div>
                <p class="first_td_p" v-else>{{ index + 1 }}</p>
              </div>
            </template>
            <template v-else-if="v.showType === 'table'" class="bill_mask_back_view">
              <!-- <div v-if="tableDisabled" class="bill_mask_view"></div> -->
              <template v-if="v.props === 'companyName'">
                <div style="display: flex; width: 100%; justify-content: space-between; align-items: center;">
                <input
                  type="text"
                  v-model="item[k]"
                  style="border-color: #1893fc; background: transparent; white-space: normal;
                    word-wrap: break-word;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;"
                  @focus="onShowSupplier(index)"
                  placeholder="请选择"
                />
                <p class="click_p"  @click="onShowSupplier(index)">选择</p>
              </div>
              </template>
              <template v-else>
                <div style="display: flex; width: calc(100% - 40px); justify-content: space-between; align-items: center;">
                <input
                  type="text"
                  @click="onCheckStorehouse(index)"
                  v-model="item[k]"
                  :class="classColor(item)"
                  style="border-color: #1893fc; background: transparent; white-space: normal;
                    word-wrap: break-word;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;"
                  readonly
                />
                <p class="click_p" @click="onCheckStorehouse(index)">选择</p>
              </div>
              </template>
            </template>
            <template v-else-if="v.showType === 'selectDw' && ['kctzd', 'cbtz'].includes(orderType)">
              <p>{{ item.unit }}</p>
            </template>

            <template
              v-else-if="v.showType === 'selectDw' && ['qckclr'].includes(orderType) && k === 'assistUnit'"
              class="bill_mask_back_view"
            >
              <div v-if="tableDisabled" class="bill_mask_view"></div>
              <el-select v-model="item[k]" @change="changeAssistUnit(index, item)">
                <el-option
                  v-for="(a, b) in item.goodsManyNorms"
                  :key="a.unit"
                  :label="a.unit"
                  :value="a.unit"
                ></el-option>
              </el-select>
            </template>
            <template v-else-if="v.showType === 'selectDw' && ['khwlbm'].includes(orderType)" class="bill_mask_back_view">
              <div v-if="tableDisabled" class="bill_mask_view"></div>
              <el-select v-model="item[k]" :class="classColor(item)" @change="changeUnitSpecs(index, item)">
                <el-option
                  v-for="(a, b) in item.goodsManyNorms"
                  :key="a.unit"
                  :label="a.unit"
                  :value="a.unit"
                ></el-option>
              </el-select>
            </template>
            <template v-else-if="v.showType === 'selectDw'" class="bill_mask_back_view">
              <div v-if="tableDisabled" class="bill_mask_view"></div>
              <el-select v-model="item[k]" :class="classColor(item)" @change="changeUnit(index, item)">
                <el-option
                  v-for="(a, b) in item.goodsManyNorms"
                  :key="a.unit"
                  :label="a.unit"
                  :value="a.unit"
                ></el-option>
              </el-select>
            </template>
            <template v-else-if="v.showType === 'selectCk'" class="bill_mask_back_view">
              <div v-if="tableDisabled" class="bill_mask_view"></div>
              <input type="text" :class="classColor(item)" v-model="item[k]" @click="onShowCk(index)" />
              <i class="el-icon-arrow-down select_input"></i>
              <ul class="select_option_ck">
                <li
                  :class="selectLiCk == b ? 'select_li' : ''"
                  v-for="(a, b) in StorehouseList"
                  :key="b"
                  @click="onClickCk(a, b, index)"
                >
                  {{ a.storehouseName }}
                </li>
              </ul>
            </template>
            <template v-else-if="v.showType === 'date'">
              <el-date-picker
                :class="classColor(item)"
                v-model="item[k]"
                type="date"
                :disabled="tableDisabled"
              ></el-date-picker>
              <!-- <input type="date"  v-model="item[k]" style="width: 120px" /> -->
            </template>
            <template v-else-if="v.showType === 'check'">
              <input
                :class="classColor(item)"
                type="checkbox"
                v-model="item[k]"
                @change="onHandleIsGive(item[k], index)"
                class="inpu_checkbox"
                :disabled="tableDisabled"
              />
            </template>
            <template v-else-if="v.showType === 'checkH'">
              <input
                :class="classColor(item)"
                type="checkbox"
                v-model="item[k]"
                @change="handleCheckboxChange(index)"
                class="inpu_checkbox"
                :disabled="isEdit"
              />
            </template>
            <template v-else-if="orderType == 'byd' && k == 'costPriceShow'">
              <input
                type="text"
                v-model="item[k]"
                :class="classColor(item)"
                @blur="handlePrice(index, k)"
                @input="inputPrice(k, item)"
                :disabled="tableDisabled"
                @focus="focusSelect"
              />
            </template>
            <template v-else-if="v.showType === 'input'">
              <p v-if="item.specialColorSize && k == 'numberShow'" style="height: 100%;display: flex;align-items: center;cursor: pointer;" @click="onShowSpecialColorSize(index)" :class="classColor(item)">{{ item[k] }}</p>
              <!-- 调拨单调拨的计算 -->
              <input
                type="text"
                v-model="item[k]"
                v-else-if="orderType === 'dbd' && k === 'allotPriceShow'"
                @blur="handleAllotPrice(index, k)"
                @input="inputMoney(k, item)"
                :disabled="tableDisabled"
                @focus="focusSelect"
              />
              <input
                type="text"
                v-model="item[k]"
                v-else-if="orderType === 'dbd' && k === 'numberShow'"
                @blur="handleAllotPrice(index, k)"
                @input="inputNumber(k, item)"
                :disabled="tableDisabled"
                @focus="focusSelect"
              />
              <!-- 如果是成本调整的计算 -->
              <input
                type="text"
                v-model="item[k]"
                v-else-if="orderType === 'cbtz' && k === 'newPriceShow'"
                @blur="handlecbtzNumber(index, k)"
                @input="inputPrice(k, item)"
                :disabled="tableDisabled"
                @focus="focusSelect"
              />
              <!-- 报损报溢单的计算 -->
              <input
                type="text"
                v-model="item[k]"
                :class="classColor(item)"
                v-else-if="['pdd', 'byd', 'bsd'].includes(orderType) && k === 'numberShow'"
                @blur="handlePrice(index, k)"
                @input="inputNumber(k, item)"
                :disabled="tableDisabled"
                @focus="focusSelect"
              />
              <input
                type="text"
                v-model="item[k]"
                :class="classColor(item)"
                v-else-if="['pdd', 'byd', 'bsd'].includes(orderType) && k === 'costPriceShow'"
                @blur="handlePrice(index, k)"
                @input="inputPrice(k, item)"
                :disabled="tableDisabled"
                @focus="focusSelect"
              />
              <input
                type="text"
                v-model="item[k]"
                :class="classColor(item)"
                v-else-if="['pdd', 'byd', 'bsd'].includes(orderType) && k === 'priceShow'"
                @blur="handlePriceNumber(index, k)"
                @input="inputMoney(k, item)"
                :disabled="tableDisabled"
                @focus="focusSelect"
              />
              <input
                type="text"
                v-model="item[k]"
                :class="classColor(item)"
                v-else-if="
                  ['zjzj', 'zjjs', 'yfkzj', 'yfkjs', 'yskzj', 'yskjs'].includes(orderType) &&
                  ['feeMoneyShow', 'changeMoneyShow'].includes(k)
                "
                @blur="handleMoney(index, k)"
                @input="inputMoney(k, item)"
                :disabled="tableDisabled"
                @focus="focusSelect"
              />
              <!-- 如果是库存调整单的计算 -->
              <input
                type="text"
                v-model="item[k]"
                v-else-if="orderType === 'kctzd' && k !== 'remark'"
                @blur="handleKctzdNumber(index, k)"
                @input="inputMoney(k, item)"
                :disabled="tableDisabled"
                @focus="focusSelect"
              />
              <!-- 期初库存录入的计算 -->
              <input
                type="text"
                v-model="item[k]"
                v-else-if="orderType === 'qckclr' && k === 'numberShow'"
                @blur="handleStockPrice(index, k)"
                @input="inputNumber(k, item)"
                :disabled="tableDisabled"
                @focus="focusSelect"
              />
              <input
                type="text"
                v-model="item[k]"
                v-else-if="orderType === 'qckclr' && k === 'costPriceShow'"
                @blur="handleStockPrice(index, k)"
                @input="inputPrice(k, item)"
                :disabled="tableDisabled"
                @focus="focusSelect"
              />
              <input
                type="text"
                v-model="item[k]"
                v-else-if="orderType === 'qckclr' && k === 'stockPriceShow'"
                @blur="handleStockCostPrice(index, k)"
                @input="inputMoney(k, item)"
                :disabled="tableDisabled"
                @focus="focusSelect"
              />
              <el-tooltip
                :content="item[k]"
                placement="top"
                :disabled="!item[k]"
                class="item"
                effect="dark"
                v-else-if="k === 'remark'"
              >
                <div style="margin: 0; width: 100%; height: 100%">
                  <el-input
                    style="border: 1px solid #ffffff; margin: 0; width: 100%; height: 100%"
                    type="text"
                    v-model="item[k]"
                    :class="classColor(item)"
                    :disabled="tableDisabled"
                    :maxlength="200"
                  />
                </div>
              </el-tooltip>
              <input type="text" :class="classColor(item)" v-model="item[k]" v-else :disabled="tableDisabled" />
            </template>
            <template v-else-if="k === 'goodsCode'">
              <p v-if="item.goodsId" style="width: 100%" :class="classColor(item)">{{ item[k] }}</p>
              <input
                type="text"
                v-model="item[k]"
                @keyup.enter="handleGoodsCode(index)"
                style="width: 100%"
                :class="classColor(item)"
                placeholder="请输入"
                v-else
              />
            </template>
            <p :class="classColor(item)" style="width: 100%;display: flex;justify-content: center;"  v-else>{{ item[k] }}</p>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr class="last_tr">
          <td v-for="(item, index) in TableConfig.columnData" :key="index" :style="styleWidth(item)">
            <p v-if="index == 'idx'">合计</p>
            <p v-if="item.showLength">共{{ TableConfig.tableData.length }}条明细</p>
            <p v-if="item.isSum">{{ item.sumValue }}</p>
          </td>
        </tr>
      </tfoot>
    </table>
    <DialogCommodity
      ref="commodityRef"
      :isMask="isMask"
      :isRadio="isRadio"
      :storehouseId="storehouseId"
      @onSelectCommodityMultiple="onSelectCommodityMultiple"
      @onDeleteCommodity="onDeleteCommodity"
    >
    </DialogCommodity>
    <!-- @onSelectCommodityMultiple="onSelectCommodityMultiple" -->
    <!-- 选择往来单位弹框  -->
    <DialogSupplier ref="supplierRef" :isMask="isMask" @onSelectSupplier="onSelectSupplier"></DialogSupplier>
    <!-- 在template最后添加，在</div>闭合标签之前 -->
    <DialogSpecialColorSize ref="dialogSpecialColorSize" @updateSpecialColorSize="updateSpecialColorSize" @onSpecialClose="onSpecialClose"></DialogSpecialColorSize>
  </div>
</template>

<script>
import DialogCommodity from '@/views/components/dialogCommodity'
import DialogSupplier from '@/views/components/dialogSupplier'
import DialogSpecialColorSize from '@/views/components/dialogSpecialColorSize.vue'
import {
  getSystemParamsByName,
  formatMoney,
  formatPrice,
  formatNumber,
  formatFour,
  delcommafy,
  sysConfig,
} from '@/utils/index'
import { getAction, postAction } from '@/api/manage'
export default {
  components: {
    DialogCommodity,
    DialogSupplier,
    DialogSpecialColorSize,
  },
  props: {
    TableConfig: Object,
    selectedRows: Array, //选中数据
    StorehouseList: Array,
    selectId: Number,
    orderType: String,
    storehouseId: String,
    commitType: String,
    tableDisabled: {
      type: Boolean,
      default: false,
    },
    isMask: {
      type: Boolean,
      default: true,
    },
    isRadio: {
      type: Boolean,
      default: false,
    },
    isDrag: {
      type: Boolean,
      default: false,
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      goosIndex: 0, //选择商品索引
      companyIndex: 0, //往来单位索引
      allChecked: false, //全选
      localSelectedRows: this.selectedRows, // 创建一个本地副本
      selectLiUnit: -1, //记录当前选中的单位下标
      selectLiCk: -1, //记录当前选中的仓库下标
      showbackGroundStyle: -1, // 记录鼠标移入表格的某一行，改变表格背景色
      tableIndex: 0, // 表格中当前选中第几行的下标
      // tableIndex: -1, // 商品提示框中当前选中第几行的下标
      selecSptListData: {}, // 商品提示框中当前选中第几行的数据
      // 商品提示框数据
      tipSpList: {
        top: 0,
        left: 0,
        displaySta: 'none', //是否显示提示框
        listData: [], //提示框内数据集合
        mark: -1, //激活当前选中行状态
      },
      tipTbaleIndex: -1,
      isInputManyGoods: false,
      dataLoading: false, // 点击按钮
      isGoodsCode: false, // 条形码选择
      isAddCommodity: false, // 商品添加成功
      priceLength: 2,
      moneyLength: 2,
      numLength: 2,
    }
  },
  created() {
    this.getSubData()
  },
  mounted() {
    this.$nextTick(() => {
      if (this.isDrag) {
        this.addDragColumnWidth()
      }
    })
    let config = sysConfig()
    // 获取系统配置参数：1、允许同一商品信息录入多行
    this.isInputManyGoods = config.allow_multi_line_entry_goods_info
  },
  computed: {},
  watch: {
    'TableConfig.tableData': {
      handler() {
        this.onSum()
        // 检查所有行的复选框是否都被选中
        const allChecked = this.TableConfig.tableData.every((item) => {
          for (const key in this.TableConfig.columnData) {
            if (this.TableConfig.columnData[key].isCheckHead) {
              return item[key]
            }
          }
          return true
        })
        this.allChecked = allChecked

        // this.TableConfig.tableData.forEach(item => {
        //   if (!item.goodsManyNorms) {
        //     this.getManyNormsById(item)
        //   }
        // })
      },
      deep: true,
    },
    'TableConfig.columnData': {
      handler() {
        this.onSum()
      },
      deep: true,
    },
  },
  methods: {
    onShowSpecialColorSize(index) {
      let goods = this.TableConfig.tableData[index]
      let params = {
        goodsId: goods.goodsId,
        goodsIndex: index,
        storehouseId: this.storehouseId,
        accessType: ['dbd'].includes(this.orderType) ? 'out' : 'in',
        billDisabled: this.tableDisabled,
        id: goods.id,
        specialList: goods.attributeOrderInfoRequest
      }
      this.$refs.dialogSpecialColorSize.showDialog(params)
    },
    
    updateSpecialColorSize(data) {
      let list = data.list
      let colorList = []
      for (let index = 0; index < list.length; index++) {
        let element = list[index];
        let sizeList = element.sizeList
          for (let i = 0; i < sizeList.length; i++) {
            let sizeElement = sizeList[i];
            // 如果sizeElement.id不存在，则表示是新增的规格，否则是修改的规格，为0也要传
            if (sizeElement.number > 0 || sizeElement.id) {
              colorList.push({
                goodsId: data.goodsId,
                colorId: element.colorId,
                sizeId: sizeElement.sizeId,
                number: sizeElement.number || 0,
                id: sizeElement.id
              })
            }
          }
      }
      console.log(colorList);
      
      this.TableConfig.tableData[data.goodsIndex].number = data.totalNumber
      this.TableConfig.tableData[data.goodsIndex].numberShow = formatNumber(data.totalNumber)
      this.TableConfig.tableData[data.goodsIndex].attributeOrderInfoRequest = colorList
    },
    onSpecialClose() {
      console.log('onSpecialClose')
      for (let index = 0; index < this.TableConfig.tableData.length; index++) {
        let element = this.TableConfig.tableData[index];
        if (!element.showSpeial && element.goodsId) {
          element.showSpeial = true
          this.onShowSpecialColorSize(index)
          return
        }
      }
    },
    handleCheckboxChange(index) {
      if (this.TableConfig.tableData[index]['isCheck']) {
        // 选中
        if (!this.localSelectedRows.includes(index)) {
          this.localSelectedRows.push(index)
        }
      } else {
        // 取消选中
        const indexToRemove = this.localSelectedRows.indexOf(index)
        if (indexToRemove > -1) {
          this.localSelectedRows.splice(indexToRemove, 1)
        }
      }
    },
    // 批量删除
    getSelectedRows() {
      if (this.dataLoading) {
        return
      }
      if (this.localSelectedRows.length >= 1) {
        this.$emit('showDeleteTip',false)
      } else {
        this.$elMessage({
          showClose: true,
          message: '请先选择需要删除的数据！',
          type: 'error',
          iconClass: 'el-icon-warning-outline',
          duration: 3000,
        })
        return
      }
    },
    // 确认删除当前行数据
    deleteOneRow(index) {
      if (this.dataLoading) {
        return
      }
      // this.setDataLoading()
      this.$emit('onDeleteRowPlus', this.TableConfig.tableData[index])
      if (this.TableConfig.tableData.length === 1) {
        let obj = {}
        let item = this.TableConfig.tableData[0]
        for (const key in this.TableConfig.columnData) {
          if (['idx'].includes(key)) {
            obj[key] = item[key]
          } else {
            obj[key] = ''
          }
        }
        this.TableConfig.tableData = [obj]
        return
      }
      this.TableConfig.tableData.splice(index, 1)
      console.log(8888, this.TableConfig.tableData)
      this.$emit('onDeleteRow', this.TableConfig.tableData)
    },
    // 确认批量删除方法
    delFun() {
      // 对 selectedRows 进行降序排序以避免索引问题
      this.localSelectedRows.sort((a, b) => b - a) // 确保是数值比较

      for (let i = 0; i < this.localSelectedRows.length; i++) {
        const index = this.localSelectedRows[i]
        console.log('批量删除行的索引：', index)
        if (this.TableConfig.tableData.length === 1) {
          let obj = {}
          for (const key in this.TableConfig.columnData) {
            if (['idx'].includes(key)) {
              obj[key] = this.TableConfig.tableData[0][key]
            } else {
              obj[key] = ''
            }
          }
          this.TableConfig.tableData = [obj]
          break // 完成操作后退出循环，因为只剩下最后一个元素不需要再删除
        }
        this.TableConfig.tableData.splice(index, 1)
      }
      // 删除操作完成后，清空 selectedRows 数组
      this.localSelectedRows = []
    },
    // 全选方法
    handleAllCheck() {
      this.TableConfig.tableData.forEach((item, index) => {
        for (const key in this.TableConfig.columnData) {
          if (this.TableConfig.columnData[key].isCheckHead) {
            item[key] = this.allChecked
          }
        }
        // 根据全选状态更新 selectedRows 数组
        if (this.allChecked) {
          // 全选时，将所有索引添加到 selectedRows 中
          if (!this.localSelectedRows.includes(index)) {
            this.localSelectedRows.push(index)
          }
        } else {
          // 取消全选时，从 selectedRows 中移除所有索引
          const indexToRemove = this.localSelectedRows.indexOf(index)
          if (indexToRemove > -1) {
            this.localSelectedRows.splice(indexToRemove, 1)
          }
        }
      })
    },
    addDragColumnWidth() {
      let that = this
      const resizers = document.querySelectorAll('.resizer')

      const setCellWidth = (cell, width) => {
        let props = cell.id
        // console.log(width);
        for (const key in that.TableConfig.columnData) {
          if (key == props) {
            let element = that.TableConfig.columnData[key]
            element.cellWidth = `${width}px`
          }
        }
      }

      resizers.forEach(function (resizer) {
        let startX
        let startWidth
        let th

        resizer.addEventListener('mousedown', function (e) {
          th = e.target.parentElement
          startX = e.clientX
          startWidth = th.offsetWidth
          document.documentElement.addEventListener('mousemove', mouseMoveHandler, false)
          document.documentElement.addEventListener('mouseup', mouseUpHandler, false)
        })

        const mouseMoveHandler = function (e) {
          const width = startWidth + (e.clientX - startX)
          setCellWidth(th, width)
        }

        const mouseUpHandler = function () {
          document.documentElement.removeEventListener('mousemove', mouseMoveHandler, false)
          document.documentElement.removeEventListener('mouseup', mouseUpHandler, false)
          that.$emit('onHandleDrag', that.TableConfig.columnData)
        }
      })
    },
    addDragColumnWidthMore() {
      let that = this
      const resizers = document.querySelectorAll('.resizer')
      let columns = JSON.parse(JSON.stringify(that.TableConfig.columnData))

      const setCellWidth = (cell, width) => {
        let props = cell.id
        for (const key in columns) {
          if (key == props) {
            let element = columns[key]
            element.cellWidth = `${width}px`
          }
        }
        console.log(that.tableId)
        if (that.tableId == 'in') {
          that.$emit('onHandleDragIn', columns)
        } else {
          that.$emit('onHandleDrag', columns)
        }
      }

      resizers.forEach(function (resizer) {
        let startX
        let startWidth
        let th

        resizer.addEventListener('mousedown', function (e) {
          th = e.target.parentElement
          startX = e.clientX
          startWidth = th.offsetWidth
          document.documentElement.addEventListener('mousemove', mouseMoveHandler, false)
          document.documentElement.addEventListener('mouseup', mouseUpHandler, false)
        })

        const mouseMoveHandler = function (e) {
          const width = startWidth + (e.clientX - startX)
          setCellWidth(th, width)
        }

        const mouseUpHandler = function () {
          document.documentElement.removeEventListener('mousemove', mouseMoveHandler, false)
          document.documentElement.removeEventListener('mouseup', mouseUpHandler, false)
          if (that.tableId == 'in') {
            that.$emit('onHandleDragIn', columns)
          } else {
            that.$emit('onHandleDrag', columns)
          }
        }
      })
    },
    // 打开选择往来单位弹出框
    onShowSupplier(index) {
      this.companyIndex = index
      this.$refs.supplierRef.openDialog()
      // this.$refs.supplierRef.dialogVisible = true
    },
    // 当前选择往来单位数据
    onSelectSupplier(val) {
      console.log('val2', val)
      this.TableConfig.tableData[this.companyIndex].companyId = val.id
      this.TableConfig.tableData[this.companyIndex].companyName = val.companyName
      this.TableConfig.tableData[this.companyIndex].companyNumber = val.companyNumber
      console.log('this.TableConfig.tableData2', this.TableConfig.tableData[this.companyIndex])
      this.$emit('onHandleWlData', this.TableConfig.tableData, this.companyIndex, val)
      this.$forceUpdate()
    },
    getManyNorms() {
      this.TableConfig.tableData.forEach((item) => {
        if (!item.goodsManyNorms) {
          this.getManyNormsById(item)
        }
      })
    },
    // 控制输入不能超过限制位数
    inputMoney(key, val) {
      //首位不能输入"."
      val[key] = val[key].replace(/^\./g, '0.')
      val[key] = val[key].replace(/\.{2,}/g, '.') //只保留第一个. 清除多余的
      val[key] = val[key].replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
      if (this.moneyLength === 2) {
        // 小数点后面保留2位
        val[key] = val[key].replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
      } else {
        // 小数点后面保留4位
        val[key] = val[key].replace(/^(\-)*(\d+)\.(\d\d\d\d).*$/, '$1$2.$3')
      }
    },
    // 控制输入不能超过限制位数
    inputPrice(key, val) {
      //首位不能输入"."
      val[key] = val[key].replace(/^\./g, '0.')
      val[key] = val[key].replace(/\.{2,}/g, '.') //只保留第一个. 清除多余的
      val[key] = val[key].replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
      if (this.priceLength === 2) {
        // 小数点后面保留2位
        val[key] = val[key].replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
      } else {
        // 小数点后面保留4位
        val[key] = val[key].replace(/^(\-)*(\d+)\.(\d\d\d\d).*$/, '$1$2.$3')
      }
    },
    // 控制输入不能超过限制位数
    inputNumber(key, val) {
      //首位不能输入"."
      val[key] = val[key].replace(/^\./g, '0.')
      val[key] = val[key].replace(/\.{2,}/g, '.') //只保留第一个. 清除多余的
      val[key] = val[key].replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
      if (this.numLength === 2) {
        // 小数点后面保留2位
        val[key] = val[key].replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
      } else {
        // 小数点后面保留4位
        val[key] = val[key].replace(/^(\-)*(\d+)\.(\d\d\d\d).*$/, '$1$2.$3')
      }
    },
    async getManyNormsById(item) {
      if (!item.goodsId) return
      var res = await getAction('/xghGoods/xghGoods/getManyNormsById', {
        goodsId: item.goodsId,
      })
      if (res.code == 200) {
        item.goodsManyNorms = res.result
      }
    },
    // 宽度自适应样式
    styleWidth(item) {
      return { 
        width:item.props=='norms' ? '150px':item.cellWidth,
        minWidth:item.props=='norms' ? '150px':item.cellWidth,
        display: !item.isShow || !item.zidingyiState ? 'none' : '',
      }
    },
    focusSelect(e) {
      e.target.select()
    },
    classColor(item) {
      // 不同盘点状态显示不同颜色  1 红色盘损  2 绿色盘溢 3 蓝色未盘
      if (item.status == 1) {
        return 'colorRed'
      } else if (item.status == 2) {
        return 'colorGreen'
      } else if (item.status == 3) {
        return 'colorBlue'
      } else {
        return 'colorBlack'
      }
    },
    getSubData() {
      if (!this.isEdit) {
        // this.getSpStorage() // 初始化默认获取缓存中存储的曾经点击过的商品数据
        this.handleTableData() //初始化通过我们设置的this.TableConfig.columnData 表头的数据，给this.TableConfig.tableData表格新增一条空数据。
        // this.getTipTableIndex() // 初始化动态获取提示框表格在哪一列展示
        // 获取价格、金额、数量小数点位数
        let unititem = this.$lcStorage.get('toFixedList')
        if (unititem) {
          this.priceLength = unititem.unitPrice
          this.moneyLength = unititem.allPrice
          this.numLength = unititem.number
        }
      }
    },
    // 单位切换并且对应规格
    changeUnitSpecs(index, val){
      this.goosIndex = index
      const unitArr = val.goodsManyNorms.filter((item) => item.unit == val.goodsUnit)
      // console.log("改变单位并且对应规格",index,val,unitArr,this.TableConfig.tableData[this.goosIndex].goodsSpecs)
      this.TableConfig.tableData[this.goosIndex].goodsSpecs = unitArr[0].specs
      this.TableConfig.tableData[this.goosIndex].goodsUnitId = unitArr[0].id
    },
    // 单位切换
    changeUnit(index, val) {
      // 所有带选择商品的都需要进行折算数量计算和成本价调整,期初库存录入
      if (['pdd', 'bsd', 'byd', 'dbd', 'cbtz', 'kctzd', 'qckclr'].includes(this.orderType) && val) {
        if (val.goodsManyNorms && val.goodsManyNorms.length > 0) {
          // 查找选择的单位对应的数据
          const unitArr = val.goodsManyNorms.filter((item) => item.unit == val.unit)
          if (unitArr && unitArr.length > 0) {
            const data = unitArr[0]
            // 用换算比例计算数量
            //20240202 调拨单在切换单位时数量默认为1
            val.norms = data.specs
            const scale = this.orderType == 'dbd' ? 1 : val.scale ? data.scale / val.scale : 1
            // 用换算比例计算价格
            const scalePrice = val.scale ? val.scale / data.scale : 1
            // 存储换算比例
            val.scale = delcommafy(data.scale)
            // 修改单位之后，需要更改对应的成本价
            if (this.orderType == 'cbtz') {
              val.surplusNumber = formatFour(delcommafy(val.surplusNumber) / scale)
              val.surplusNumberShow = formatNumber(val.surplusNumber)
              val.updateNumber = formatFour(delcommafy(val.updateNumber) / scale)
              val.updateNumberShow = formatNumber(val.updateNumber)
              val.oldPrice = formatFour(delcommafy(val.oldPrice) / scalePrice)
              val.oldPriceShow = formatPrice(val.oldPrice)
              // 计算金额
              this.handlecbtzNumber(index)
            } else if (this.orderType == 'kctzd') {
              val.formerNumber = formatFour(delcommafy(val.formerNumber) / scale)
              val.formerNumberShow = formatNumber(val.formerNumber)
              val.formerCostPrice = formatFour(delcommafy(val.formerCostPrice) / scalePrice)
              val.formerCostPriceShow = formatPrice(val.formerCostPrice)
              // 计算金额
              this.handleKctzdNumber(index)
            } else if (this.orderType == 'dbd') {
              val.number = formatFour(delcommafy(val.number) / scale)
              val.numberShow = formatNumber(val.number)
              val.costPrice = formatFour(delcommafy(val.costPrice) / scalePrice)
              val.costPriceShow = formatPrice(val.costPrice)
              val.allotPrice = formatFour(delcommafy(val.allotPrice) / scalePrice)
              val.allotPriceShow = formatPrice(val.allotPrice)
              // 计算金额
              this.handleAllotPrice(index)
            } else if (this.orderType == 'qckclr') {
              val.number = formatFour(delcommafy(val.number) / scale)
              val.numberShow = formatNumber(val.number)
              val.costPrice = formatFour(delcommafy(val.costPrice) / scalePrice)
              val.costPriceShow = formatPrice(val.costPrice)
              // 计算金额
              this.handleStockPrice(index)
            } else if (['pdd', 'bsd', 'byd'].includes(this.orderType)) {
              val.number = formatFour(delcommafy(val.number) / scale)
              val.numberShow = formatNumber(val.number)
              val.costPrice = formatFour(delcommafy(val.costPrice) / scalePrice)
              val.costPriceShow = formatPrice(val.costPrice)
              // 计算金额
              this.handlePrice(index)
            }
          }
        }
      }
    },
    // 期初库存辅助单位切换计算
    changeAssistUnit(index, val) {
      if (val.goodsManyNorms && val.goodsManyNorms.length > 0) {
        // 查找选择的单位对应的数据
        const unitArr = val.goodsManyNorms.filter((item) => item.unit == val.assistUnit)
        if (unitArr && unitArr.length > 0) {
          const data = unitArr[0]
          // 存储换算比例
          val.assistScale = delcommafy(data.scale)
          // 用换算比例计算数量
          const scale = val.scale ? data.scale / val.scale : 1
          val.assistNumber = formatFour(val.number / scale)
          val.assistNumberShow = formatNumber(val.number / scale)
        }
      }
    },
    /**
     * 成本调整
     */
    handlecbtzNumber(index, k = '') {
      const tableData = this.TableConfig.tableData[index]
      switch (k) {
        case 'newPriceShow':
          tableData.newPrice = formatFour(delcommafy(tableData.newPriceShow))
          tableData.newPriceShow = formatPrice(delcommafy(tableData.newPrice))
          break
      }
      // 2023-09-21 按PC端修改 调整金额=调整数量*（调后单价-调前成本价）
      tableData.trimPrice = formatPrice(
        (delcommafy(tableData.newPrice) - delcommafy(tableData.oldPrice)) * delcommafy(tableData.updateNumber)
      )
      // 修改计算规则  调整金额=调整数量*调后单价
      // tableData.trimPrice = formatFour(
      //   delcommafy(tableData.newPrice) * delcommafy(tableData.updateNumber)
      // )
      tableData.trimPriceShow = formatMoney(delcommafy(tableData.trimPrice))
      tableData.zsNumber = delcommafy(tableData.updateNumber) * delcommafy(tableData.scale || 1)
    },
    /**
     * 库存调整单
     */
    handleKctzdNumber(index, k = '') {
      const tableData = this.TableConfig.tableData[index]
      switch (k) {
        case 'adjustNumberShow':
          tableData.adjustNumber = formatFour(delcommafy(tableData.adjustNumberShow))
          tableData.adjustNumberShow = formatNumber(delcommafy(tableData.adjustNumber))
          break
        case 'adjustCostPriceShow':
          tableData.adjustCostPrice = formatFour(delcommafy(tableData.adjustCostPriceShow))
          tableData.adjustCostPriceShow = formatPrice(delcommafy(tableData.adjustCostPrice))
          break
      }
      // 调整后差额=（调整后库存 * 调整后成本价) - (原库存数 * 原成本价）
      tableData.adjustDifference = formatFour(
        delcommafy(tableData.adjustNumber) * delcommafy(tableData.adjustCostPrice) -
          delcommafy(tableData.formerNumber) * delcommafy(tableData.formerCostPrice)
      )
      tableData.adjustDifferenceShow = formatMoney(delcommafy(tableData.adjustDifference))
      tableData.zsNumber = delcommafy(tableData.adjustNumber) * delcommafy(tableData.scale || 1)
    },
    // 调拨单调拨单价/数量改变
    handleAllotPrice(index, k) {
      const tableData = this.TableConfig.tableData[index]
      switch (k) {
        case 'costPriceShow':
          tableData.costPrice = formatFour(delcommafy(tableData.costPriceShow))
          tableData.costPriceShow = formatPrice(delcommafy(tableData.costPrice))
          break
        case 'numberShow':
          tableData.number = formatFour(delcommafy(tableData.numberShow))
          tableData.numberShow = formatNumber(delcommafy(tableData.number))
          break
        case 'allotPriceShow':
          tableData.allotPrice = formatFour(delcommafy(tableData.allotPriceShow))
          tableData.allotPriceShow = formatPrice(delcommafy(tableData.allotPrice))
          break
      }
      // 1、同价：金额=数量*原成本价
      // 2、变价：金额=数量*调拨单价，调拨差额=（调拨单价-原成本价）*数量
      if (this.commitType == 1) {
        // 金额 = 调拨单价 * 数量
        tableData.price = formatFour(delcommafy(tableData.costPrice) * delcommafy(tableData.number))
        tableData.priceShow = formatMoney(delcommafy(tableData.price))
      } else {
        // 调拨差额 =（调拨单价 - 原成本价）* 数量
        tableData.allotAllprice = formatFour(
          (delcommafy(tableData.allotPrice) - delcommafy(tableData.costPrice)) * delcommafy(tableData.number)
        )
        tableData.allotAllpriceShow = formatMoney(delcommafy(tableData.allotAllprice))
        // 金额 = 调拨单价 * 数量
        tableData.price = formatFour(delcommafy(tableData.allotPrice) * delcommafy(tableData.number))
        tableData.priceShow = formatMoney(delcommafy(tableData.price))
      }
      tableData.zsNumber = delcommafy(tableData.number) * delcommafy(tableData.scale || 1)
    },
    // 期初库存录入计算
    handleStockPrice(index, k = '') {
      const tableData = this.TableConfig.tableData[index]
      switch (k) {
        case 'costPriceShow':
          tableData.costPrice = formatFour(delcommafy(tableData.costPriceShow))
          tableData.costPriceShow = formatPrice(delcommafy(tableData.costPrice))
          break
        case 'numberShow':
          tableData.number = formatFour(delcommafy(tableData.numberShow))
          tableData.numberShow = formatNumber(delcommafy(tableData.number))
          break
      }
      // 库存金额 = 库存数量 * 成本价
      tableData.stockPrice = formatFour(delcommafy(tableData.costPrice) * delcommafy(tableData.number))
      tableData.stockPriceShow = formatMoney(delcommafy(tableData.stockPrice))
      tableData.zsNumber = delcommafy(tableData.number) * delcommafy(tableData.scale || 1)
      // 计算辅助单位的数量
      if (tableData.assistUnit) {
        const scale = tableData.scale ? tableData.assistScale / tableData.scale : 1
        tableData.assistNumber = formatFour(tableData.number / scale)
        tableData.assistNumberShow = formatNumber(delcommafy(tableData.assistNumber))
      }
    },
    // 期初库存录入计算成本价
    handleStockCostPrice(index, k = '') {
      const tableData = this.TableConfig.tableData[index]
      switch (k) {
        case 'stockPriceShow':
          tableData.stockPrice = formatFour(delcommafy(tableData.stockPriceShow))
          tableData.stockPriceShow = formatPrice(delcommafy(tableData.stockPrice))
          break
      }
      // 成本价 = 库存金额/库存数量
      tableData.costPrice = formatFour(delcommafy(tableData.stockPrice) / delcommafy(tableData.number))
      tableData.costPriceShow = formatPrice(delcommafy(tableData.costPrice))
      tableData.zsNumber = delcommafy(tableData.number) * delcommafy(tableData.scale || 1)
    },
    // 盘点单、报溢单和报损单  计算金额
    handlePrice(index, k = '') {
      const tableData = this.TableConfig.tableData[index]
      switch (k) {
        case 'numberShow':
          tableData.number = formatFour(delcommafy(tableData.numberShow))
          tableData.numberShow = formatNumber(delcommafy(tableData.number))
          break
        case 'costPriceShow':
          tableData.costPrice = formatFour(delcommafy(tableData.costPriceShow))
          tableData.costPriceShow = formatPrice(delcommafy(tableData.costPrice))
          break
      }
      // 金额 = 成本价 * 数量
      tableData.price = formatFour(delcommafy(tableData.costPrice) * delcommafy(tableData.number))
      tableData.priceShow = formatMoney(delcommafy(tableData.price))
      tableData.zsNumber = delcommafy(tableData.number) * delcommafy(tableData.scale || 1)
    },
    // 盘点单、报溢单和报损单  计算数量
    handlePriceNumber(index, k = '') {
      const tableData = this.TableConfig.tableData[index]
      switch (k) {
        case 'priceShow':
          tableData.price = formatFour(delcommafy(tableData.priceShow))
          tableData.priceShow = formatMoney(delcommafy(tableData.price))
          break
      }
      //  数量 = 金额 / 成本价
      tableData.number = formatFour(delcommafy(tableData.price) / delcommafy(tableData.costPrice))
      tableData.numberShow = formatNumber(delcommafy(tableData.number))
      tableData.zsNumber = delcommafy(tableData.number) * delcommafy(tableData.scale || 1)
    },
    // 使用系统的金额显示
    handleMoney(index, key) {
      const tableData = this.TableConfig.tableData[index]
      // 千位之后使用了","分割，需要先转成数字，否则会被当成字符串转成0
      if (key == 'feeMoneyShow') {
        tableData.feeMoney = formatFour(delcommafy(tableData.feeMoneyShow))
        tableData.feeMoneyShow = formatMoney(delcommafy(tableData.feeMoney))
      } else {
        tableData.changeMoney = formatFour(delcommafy(tableData.changeMoneyShow))
        tableData.changeMoneyShow = formatMoney(delcommafy(tableData.changeMoney))
      }
    },
    // 数量改变
    handleNumber(index) {
      this.$emit('onHandleNumber', this.TableConfig.tableData[index])
    },
    /**
     * 监听判断赠品选择框是否发生改变
     */
    onHandleIsGive(value, index) {
      const tableData = this.TableConfig.tableData[index]
      // 如果当前勾选了赠品
      if (value) {
        // 则当前行的金额为0
        tableData.allPrice = 0
      } else {
        // 反之,金额 = 含税单价 * 数量
        tableData.allPrice = tableData.taxUnitPrice * tableData.number //金额 = 含税单价 * 数量
      }
    },
    // 商品条形码改变
    handleGoodsCode(index) {
      this.isGoodsCode = true
      // 选择商品的前置条件交给调用的地方处理
      this.$emit('onCheckStorehouse', index)
    },
    /**
     * 合计列求和
     */
    onSum() {
      for (const key in this.TableConfig.columnData) {
        if (this.TableConfig.columnData[key].isSum) {
          var sum = 0
          for (let i = 0; i < this.TableConfig.tableData.length; i++) {
            sum += delcommafy(this.TableConfig.tableData[i][key])
          }
          if (key.toLowerCase().includes('number') || key.toLowerCase().includes('num')) {
            this.TableConfig.columnData[key]['sumValue'] = formatNumber(sum)
          } else {
            this.TableConfig.columnData[key]['sumValue'] = formatMoney(sum)
          }
          // 调整单的单据需要计算合并列的总数
          if (['zjzj', 'zjjs', 'yfkzj', 'yskzj', 'yfkjs', 'yskjs'].includes(this.orderType)) {
            this.$emit('onHandleAllPrice', sum)
          }
        }
      }
      // this.$emit('onHandleAllPrice', this.TableConfig.columnData.price.sumValue)
    },
    /**
     * 初始化动态获取提示框表格在哪一列展示
     */
    getTipTableIndex() {
      let arr = []
      for (const key in this.TableConfig.columnData) {
        if (this.TableConfig.columnData[key].isShow) {
          arr.push(this.TableConfig.columnData[key])
        }
      }
      arr.forEach((item, index) => {
        if (item.showType === 'table') {
          this.tipTbaleIndex = index
        }
      })
    },
    // 点击显示选项仓库的提示框
    onShowCk(index) {
      let uls = document.getElementsByClassName('select_option_ck')
      for (let i = 0; i < uls.length; i++) {
        if (i == index) {
          uls[i].style.display = 'flex'
        } else {
          uls[i].style.display = 'none'
        }
      }
    },
    // 选中某一行仓库
    onClickCk(v, i, index) {
      this.TableConfig.tableData[index].xghStorehouseId = v.id
      this.TableConfig.tableData[index].xghStorehouse = v.storehouseName
      this.selectLiCk = i
      let uls = document.getElementsByClassName('select_option_ck')
      for (let i = 0; i < uls.length; i++) {
        uls[i].style.display = 'none'
      }
    },
    // 点击显示选项单位的提示框
    onShowUnit(index) {
      let uls = document.getElementsByClassName('select_option')
      for (let i = 0; i < uls.length; i++) {
        if (i == index) {
          uls[i].style.display = 'flex'
        } else {
          uls[i].style.display = 'none'
        }
      }
    },
    // 选中某一行单位
    onClickUnit(v, i, index) {
      // this.TableConfig.tableData[index].unit = v.unit
      this.$emit('onHandleUnit', v, index)
      this.selectLiUnit = i
      let uls = document.getElementsByClassName('select_option')
      for (let i = 0; i < uls.length; i++) {
        uls[i].style.display = 'none'
      }
    },
    /**
     * 处理子表格初始化数据
     */
    handleTableData() {
      let obj = {}
      for (const key in this.TableConfig.columnData) {
        if (key !== 'idx') {
          obj[key] = ''
        }
      }
      this.TableConfig.tableData = [obj]
      for (const key in this.TableConfig.columnData) {
        if (!this.TableConfig.columnData[key].isShow) {
          delete this.TableConfig.columnData[key]
        }
      }
    },
    /**
     * 初始化删除父组件传递到子组件数据时，需要隐藏的列
     * @param {Object} obj
     */
    handlePorpsData(obj) {
      for (const key in obj) {
        if (!obj[key].isShow) {
          delete obj[key]
        }
      }
    },
    // 初始化默认获取缓存中存储的曾经点击过的商品数据
    getSpStorage() {
      // 判断缓存中是否存储过商品 如果有
      if (this.$lcStorage.get('spHistoricalRecords')) {
        // // 取出缓存的选择过的商品
        // let arr = this.$lcStorage.get('spHistoricalRecords')
        // // 再把整体的数据再存入缓存
        // this.$lcStorage.set('spHistoricalRecords', arr)
        // // 把历史记录数据去重并只展示前三个数据
        // let threeArr = this.selectDataHas(this.$lcStorage.get('spHistoricalRecords'))
        // // 再次把处理过的数据存入商品缓存中
        // this.$lcStorage.set('spHistoricalRecords', threeArr)
        // 然后取出缓存中的商品数据赋值给数组并展示到页面
        this.tipSpList.listData = this.$lcStorage.get('spHistoricalRecords')
      }
    },
    //表格宽度调整事件
    tblresize() {},
    // 打开选择商品弹出框
    onCheckStorehouse(index) {
      this.goosIndex = index
      this.isGoodsCode = false
      // 选择商品的前置条件交给调用的地方处理
      let goodIds = []
      if (this.TableConfig.tableData.length && !this.isInputManyGoods) {
        for (let i = 0; i < this.TableConfig.tableData.length; i++) {
          if (this.TableConfig.tableData[i].goodsId) {
            goodIds.push(this.TableConfig.tableData[i].goodsId)
          }
          // goodIds.push(this.TableConfig.tableData[i].goodsId)
        }
      }
      this.$refs.commodityRef.goodIds = goodIds
      if (this.isInputManyGoods || goodIds.length == 0) {
        this.$refs.commodityRef.multipleSelection = []
      }
      this.$emit('onCheckStorehouse', index)
    },
    onShowCommodity(index) {
      if (this.isGoodsCode) {
        let goodsCode = this.TableConfig.tableData[index].goodsCode
        console.log('goodsCode', goodsCode)

        if (goodsCode) {
          getAction('/xghGoods/xghGoods/queryByBarCode', { barCode: goodsCode }).then((res) => {
            console.log(res)
            if (res.success) {
              let result = res.result
              if (typeof result == 'string') {
                this.$elMessage.error(result)
                this.TableConfig.tableData[index].goodsCode = ''
              } else {
                this.tableIndex = index
                this.onSelectCommodity(result)
              }
            } else {
              this.$elMessage.error(res.message)
            }
          })
        }
      } else {
        this.tableIndex = index
        // this.$refs.commodityRef.getTableData(this.selectId)
        this.$refs.commodityRef.dialogVisible = true
      }
    },
    // 选择商品
    onSelectCommodity(val) {
      // console.log(this.orderType);
      
      // console.log('商品val', val);
      
      // 判断是否允许同一商品信息录入多行
      // 如果不允许，需要校验是否重复
      if (this.orderType == 'kctzd') {
        for (const item of this.TableConfig.tableData) {
          if (item.goodsId === val.id) {
            // return this.$elMessage.warning('不能重复选择商品！')
            return
          }
        }
      } else {
        if (this.TableConfig.tableData.length && !this.isInputManyGoods) {
          for (const item of this.TableConfig.tableData) {
            if (item.goodsId === val.id) {
              // return this.$elMessage.warning('不能重复选择商品！')
              return
            }
          }
        }
      }
      // 成本调整单需要检查库存
      if (this.orderType == 'cbtz' && val.goodsInventoryVos[0].number <= 0) {
        return this.$elMessage.warning(`商品[${val.goodsName}]在指定的仓库中没有库存，不能进行成本调整！`)
      }
      // 在获取商品后，事件发射到父组件通知父组件来处理数据字段名不统一问题
      this.$emit('onHandleSpData', this.TableConfig.tableData, this.tableIndex, val)
      let config = sysConfig()
      if (config.skip_line_after_product_entry) {
        this.addRow(this.TableConfig.tableData, this.TableConfig.tableData.length - 1)
      }
    },
    // 重置商品选择框
    onResetCommodity() {
      this.$refs.commodityRef.multipleSelection = []
    },
    // 多选商品弹窗
    onSelectCommodityMultiple(multipleData, goodIds) {
      console.log('multipleData', multipleData)
      // 单选商品
      if (this.isRadio) {
        console.log('商品val', multipleData)
        this.TableConfig.tableData[this.goosIndex].goodsId = multipleData.id
        this.TableConfig.tableData[this.goosIndex].goodsName = multipleData.goodsName
        this.TableConfig.tableData[this.goosIndex].goodsNumber = multipleData.goodsNumber
        this.TableConfig.tableData[this.goosIndex].goodsSpecs = multipleData.goodsManyNorms[0].specs
        this.TableConfig.tableData[this.goosIndex].goodsManyNorms = multipleData.goodsManyNorms
        this.TableConfig.tableData[this.goosIndex].goodsUnit = multipleData.goodsManyNorms[0].unit
        this.TableConfig.tableData[this.goosIndex].goodsUnitId = multipleData.goodsManyNorms[0].id
        this.$emit('onHandleSpData', this.TableConfig.tableData, this.goosIndex, multipleData[0])
        this.$forceUpdate()
      } else  if (multipleData.length === 1) {
        this.onSelectCommodity(multipleData[0])
      } else {
        // if(this.isRadio){
        //   return this.$elMessage.warning('只能选择一个对应的商品!')
        // }
        this.isAddCommodity = false
        multipleData.forEach((item, index) => {
          this.setMultipleCommodity(item)
          // 开启商品录入成功后立即跳行
          let config = sysConfig()
          if (config.skip_line_after_product_entry && index === multipleData.length - 1 && this.isAddCommodity) {
            this.dataLoading = false
            this.addRow(this.TableConfig.tableData, this.TableConfig.tableData.length - 1)
          }
        })
      }
      console.log(this.TableConfig.tableData);
      this.onSpecialClose()
    },
    // 删除商品
    onDeleteCommodity(deleteRowss) {
      console.log('deleteRowss', deleteRowss)
      if (deleteRowss.size == 0) return
      for (let i = this.TableConfig.tableData.length - 1; i >= 0; i--) {
        if (deleteRowss.has(this.TableConfig.tableData[i].goodsId)) {
          this.TableConfig.tableData.splice(i, 1)
        }
      }
    },
    // 处理数据添加到列表中
    setMultipleCommodity(val) {
      console.log('this.orderType', this.orderType)
      // 判断是否允许同一商品信息录入多行
      // 如果不允许，需要校验是否重复
      if (this.orderType == 'kctzd') {
        for (const item of this.TableConfig.tableData) {
          if (item.goodsId === val.id) {
            // return this.$elMessage.warning(`[${item.goodsName}]已经存在,不能重复选择商品！`)
            return
          }
        }
      } else {
        if (this.TableConfig.tableData.length && !this.isInputManyGoods) {
          for (const item of this.TableConfig.tableData) {
            if (item.goodsId === val.id) {
              // return this.$elMessage.warning(`[${item.goodsName}]已经存在,不能重复选择商品！`)
              return
            }
          }
        }
      }
      // 成本调整单需要检查库存
      if (this.orderType == 'cbtz' && val.number <= 0) {
        return this.$elMessage.warning(`商品[${val.goodsName}]在指定的仓库中没有库存，不能进行成本调整！`)
      }
      this.isAddCommodity = true
      // 查找空数据添加数据
      for (let i = 0; i < this.TableConfig.tableData.length; i++) {
        if (!this.TableConfig.tableData[i].goodsId) {
          return this.$emit('onHandleSpData', this.TableConfig.tableData, i, val)
        }
      }
      // 没有空行，先增加一行空数据
      this.dataLoading = false
      this.addRow(this.TableConfig.tableData, this.TableConfig.tableData.length - 1)
      // 在获取商品后，事件发射到父组件通知父组件来处理数据字段名不统一问题
      this.$emit('onHandleSpData', this.TableConfig.tableData, this.TableConfig.tableData.length - 1, val)
    },
    // 历史记录数据去重并只展示三个数据方法
    selectDataHas(arr) {
      let map = new Map()
      for (const item of arr) {
        if (!map.has(item.id)) {
          map.set(item.id, item)
        }
      }
      let newArr = [...map.values()]
      return newArr.slice(0, 3)
    },
    // 表格聚焦时触发触发
    gridOnFocus(event) {
      return
      let obj = event.target
      obj.select()
      // 判断当前触发的节点为输入框
      if (obj.nodeName == 'INPUT') {
        let td = this.findtd(obj)
        let tr = td.parentNode //当前td所在的tr
        let myindex = Array.prototype.indexOf.call(tr.children, td) // 判断当前所触发元素在当前行的第几列
        // 全局使用判断当前所触发的输入框位于表格的第几行
        this.tableIndex = Array.prototype.indexOf.call(tr.parentNode.children, tr)
        // 判断是否是需要弹出提示框的列
        // if (myindex == 3) {
        if (myindex == this.tipTbaleIndex) {
          // 弹出提示框并改变提示框位置
          this.tipSpList.top = td.offsetParent.offsetTop + 34
          this.tipSpList.left = obj.offsetParent.offsetLeft
          this.tipSpList.displaySta = 'block'
          // 判断当前输入框的内的值是否与提示框内的值匹配，如果匹配提示框改为选中状态
          this.OnFocusHandle(obj)
        } else {
          this.tipSpList.displaySta = 'none'
        }
      }
    },
    // 聚焦时处理
    OnFocusHandle(obj) {
      for (let i = 0; i < this.tipSpList.listData.length; i++) {
        // 判断当前输入框的值与提示框的哪一行值匹配
        if (this.tipSpList.listData[i].goodsName == obj.value) {
          this.tipSpList.mark = i // 改变提示框选中行下标
          this.selecSptListData = this.tipSpList.listData[this.tipSpList.mark]
          let cptbl = document.getElementById('tipTable')
          let ptr = cptbl.rows[this.tipSpList.mark]
          // 避免第一次触发出现问题 添加定时器（由于现在商品只展示历史记录的最近三条，所以不用当前操作）
          // setTimeout(() => {
          //   // 将当前选中行滚动到浏览器可视区域
          //   ptr.scrollIntoViewIfNeeded()
          // }, 0)
          return
        } else {
          this.tipSpList.mark = -1
        }
      }
    },
    // 失焦时触发
    gridOnBlur() {
      // this.tipSpList.displaySta = 'none'
    },
    // 键盘按下时触发
    gridOnKeyDown(event) {
      return
      let obj = event.target // 当前触发的input
      let td = this.findtd(obj) // 当前input所在的td
      let tdRight = td.nextElementSibling // 当前td的右边
      let tdLeft = td.previousElementSibling // 当前td的左边
      let tr = td.parentNode // 当前td所在的tr
      let trUp = tr.previousElementSibling // 当前tr的上一行
      let trDown = tr.nextElementSibling // 当前tr的下一行
      let myindex = Array.prototype.indexOf.call(tr.children, td) // 判断当前所触发元素在当前行的第几列
      // 判断当前所触发的节点 位于表格的第几行 this.tableIndex
      this.getTrIndex(tr)
      // 如果触发的是输入框 且 触发的是商品名称列数据时
      // if (obj.nodeName == 'INPUT' && myindex == 3) {
      if (obj.nodeName == 'INPUT' && myindex == this.tipTbaleIndex) {
        // 如果当前键盘事件为向下 且 提示框为显示状态
        if (event.key == 'ArrowDown' && this.tipSpList.displaySta == 'block') {
          this.handleTipBox('ArrowDown')
          // 如果当前键盘事件为向上 且 提示框为显示状态
        } else if (event.key == 'ArrowUp' && this.tipSpList.displaySta == 'block') {
          this.handleTipBox('ArrowUp')
          // 如果当前键盘事件为回车 且 提示框为显示状态 提示框内也有选择数据时
        } else if (event.key == 'Enter' && this.tipSpList.displaySta == 'block' && this.tipSpList.mark != -1) {
          this.handleTipBoxEnter(tdRight, 'Enter')
          // 如果当前键盘事件为回车 且 提示框为显示状态
        } else if (event.key == 'ArrowRight' || (event.key == 'Enter' && this.tipSpList.displaySta == 'block')) {
          this.handleTipBoxEnter(tdRight)
        }
      } else {
        // 当触发的不是商品名称列节点时 隐藏提示框
        this.tipSpList.displaySta = 'none'
        // 判断键盘事件 选择相应的节点
        this.nodeSelect(tdRight, tdLeft, tr, trUp, trDown, myindex)
      }
    },
    // 找到当前tr的下标
    getTrIndex(tr) {
      let tableBox = document.getElementById('tableId')
      let allTr = tableBox.getElementsByTagName('tr')
      if (tr.nodeName.toLowerCase() == 'tr') {
        for (var i = 0; i < allTr.length; i++) {
          if (allTr[i] === tr) {
            if (i >= 0) {
              this.tableIndex = i - 1
            }
          }
        }
      }
    },
    // 处理提示框的数据显示 及 替换表格内当前选中的数据
    handleTipBox(downState) {
      if (downState == 'ArrowDown' && this.tipSpList.mark != this.tipSpList.listData.length - 1) {
        // 如果按键向下 且 当前选中数据为最后一个时 当前选中数据+1
        this.tipSpList.mark++
      } else if (downState == 'ArrowUp' && this.tipSpList.mark != 0 && this.tipSpList.mark != -1) {
        // 如果按键向上 且 当前选中数据不是第一个也不是未选则时 当前选中数据-1
        this.tipSpList.mark--
      } else if (downState == 'ArrowUp' && this.tipSpList.mark == -1) {
        // 如果按键向上 且 当前选中数据是未选则时 当前选中数据为提示框的最后一条数据
        this.tipSpList.mark = this.tipSpList.listData.length - 1
      }
      // 获取提示框table 得到当前选中行自动滚动到可视区域
      let cptbl = document.getElementById('tipTable')
      let ptr = cptbl.rows[this.tipSpList.mark]
      // 把当前选择的行滚动到可视区域
      ptr.scrollIntoViewIfNeeded()
      this.selecSptListData = this.tipSpList.listData[this.tipSpList.mark]
      // 在获取商品后，事件发射到父组件通知父组件来处理数据字段名不统一问题
      // this.$emit('onHandleSpData', this.TableConfig.tableData, this.tableIndex, this.selecSptListData)
    },
    // 处理提示框按下回车后操作
    handleTipBoxEnter(tdRight, downState) {
      this.tipSpList.displaySta = 'none' // 隐藏提示框
      this.selectInput(tdRight, 'tdRight') // 选中当前输入框的下一个
      if (downState == 'Enter') {
        if (this.TableConfig.tableData.length > 1) {
          for (let i = 0; i < this.TableConfig.tableData.length; i++) {
            if (this.TableConfig.tableData[i].goodsId === this.selecSptListData.id) {
              this.$elMessage.error('不能重复选择商品！')
              // for (const key in this.TableConfig.tableData[i]) {
              //   this.TableConfig.tableData[i][key] = ''
              // }
              return
            }
          }
        }
        // 在获取商品后，事件发射到父组件通知父组件来处理数据字段名不统一问题
        this.$emit('onHandleSpData', this.TableConfig.tableData, this.tableIndex, this.selecSptListData)
      }
    },
    // 判断键盘事件 选择相应的节点
    nodeSelect(tdRight, tdLeft, tr, trUp, trDown, myindex) {
      // 如果是按下回车键
      if (event.key == 'Enter') {
        // 用当前点击的列标和当前行有多少下标做对比，如果是最后一列
        if (myindex == tr.children.length - 1) {
          // if (myindex == 11) {
          // 如果当前选择的行不是整个表格的最后一行
          if (this.tableIndex != this.TableConfig.tableData.length - 1) {
            // 则把下一行需要选择的那一列传递给选择输入框方法
            // this.selectInput(trDown.children[3])
            this.selectInput(trDown.children[this.tipTbaleIndex])
          }
        } else {
          this.selectInput(tdRight, 'tdRight')
        }
      }
      // 如果是按向上键
      else if (event.key == 'ArrowUp') {
        // 判断当前选择的行不是第一行
        if (this.tableIndex != 0) {
          this.selectInput(trUp.children[myindex])
        }
      }
      // 如果是按向右键
      else if (event.key == 'ArrowRight') {
        // 用当前点击的列标和当前行有多少下标做对比，如果是最后一列
        if (myindex == tr.children.length - 1) {
          // if (myindex == 11) {
          // 如果当前选择的行不是整个表格的最后一行
          if (this.tableIndex != this.TableConfig.tableData.length - 1) {
            // 则把下一行需要选择的那一列传递给选择输入框方法
            // this.selectInput(trDown.children[3])
            this.selectInput(trDown.children[this.tipTbaleIndex])
          }
        } else {
          this.selectInput(tdRight, 'tdRight')
        }
      }
      // 如果是按向下键
      else if (event.key == 'ArrowDown') {
        // 判断当前选择的行不是最后一行
        if (this.tableIndex != this.TableConfig.tableData.length - 1) {
          this.selectInput(trDown.children[myindex])
        }
      }
      // 如果是按向左键
      else if (event.key == 'ArrowLeft') {
        this.selectInput(tdLeft, 'tdLeft')
      }
    },
    // 选中当前输入框
    selectInput(selectNode, mark) {
      // 判断如果当前td下是input的话就选中，如果不是就继续寻找下一个td
      if (this.findinput(selectNode)) {
        let nextInput = this.findinput(selectNode)
        event.preventDefault() // 阻止默认行为
        nextInput.select()
        nextInput.scrollIntoViewIfNeeded()
      } else {
        if (mark == 'tdRight') {
          let nextTd = selectNode.nextElementSibling
          this.selectInput(nextTd, 'tdRight')
        } else if (mark == 'tdLeft') {
          let nextTd = selectNode.previousElementSibling
          this.selectInput(nextTd, 'tdLeft')
        }
      }
    },
    // 遍历找到td
    findtd(elm) {
      if (elm && elm.parentNode) {
        if (elm.parentNode.nodeName == 'TD') {
          return elm.parentNode
        } else {
          this.findtd(elm.parentNode)
        }
      }
    },
    // 遍历找到input
    findinput(elm) {
      if (elm && elm.children[0]) {
        if (elm.children[0].nodeName == 'INPUT') {
          return elm.children[0]
        } else {
          this.findinput(elm.children[0])
        }
      }
    },
    // 键盘抬起时触发
    gridOnKeyUp(event) {
      return
      event.preventDefault() // 阻止默认行为
      let obj = event.target // 当前触发的input
      let td = this.findtd(obj) // 当前input所在的td
      let tr = td.parentNode // 当前td所在的tr
      let myindex = Array.prototype.indexOf.call(tr.children, td) // 判断当前所触发元素在当前行的第几列
      // 判断当前所触发的节点 位于表格的第几行
      this.getTrIndex(tr)
      // 如果触发的是输入框 且 触发的是商品名称列数据时
      // if (obj.nodeName == 'INPUT' && myindex == 3) {
      if (obj.nodeName == 'INPUT' && myindex == this.tipTbaleIndex) {
        // 判断如果是向下/向上/退格/删除键时 阻止按键的默认行为
        if (event.key == 'ArrowDown' || event.key == 'ArrowUp' || event.key == 'Backspace' || event.key == 'Delete') {
          event.preventDefault()
        }
        // 这个是做输入时数据智能匹配的，现在只用默认展示历史记录的三条，所以暂不使用
        // else {
        //   //寻找对应的匹配索引
        //   let oldvalue = obj.value
        //   // 输入框非空判断
        //   if (obj.value != '') {
        //     let pipei_index = this.findProductIndex(obj.value)
        //     // 修改提示框选中行
        //     this.tipSpList.mark = pipei_index
        //     //如果有匹配的行
        //     if (pipei_index >= 0) {
        //       // 获取提示框当前选中行数据
        //       this.selecSptListData = this.tipSpList.listData[pipei_index]
        //       // // 获取提示框当前选中行数据
        //       // let pipei_product = this.tipSpList.listData[pipei_index];
        //       // 得到与输入框相匹配的值
        //       let inputValue = this.findProduct(obj.value, this.selecSptListData)
        //       // 商品编码赋值
        //       if (inputValue != '') {
        //         let productcd = inputValue
        //         obj.value = productcd
        //         obj.select()
        //         obj.selectionStart = oldvalue.length
        //       }
        //     }
        //   }
        // }
      }
    },
    // 找到输入框的值在提示框的哪一行
    findProductIndex(inputvalue) {
      let length = this.tipSpList.listData.length
      for (let i = 0; i < length; i++) {
        let item = this.tipSpList.listData[i]
        if (item.goodsName.indexOf(inputvalue) == 0) {
          return i
        }
        if (item.goodsCode.indexOf(inputvalue) == 0) {
          return i
        }
        if (item.goodsName.indexOf(inputvalue) == 0) {
          return i
        }
        // if (item.specs.indexOf(inputvalue) == 0) {
        //   return i
        // }
        if (item.baseUnit.indexOf(inputvalue) == 0) {
          return i
        }
        if (item.warehouse.indexOf(inputvalue) == 0) {
          return i
        }
        if (item.number.indexOf(inputvalue) == 0) {
          return i
        }
        if (item.unitPrice.indexOf(inputvalue) == 0) {
          return i
        }
        if (item.money.indexOf(inputvalue) == 0) {
          return i
        }
        if (item.arrivalDate.indexOf(inputvalue) == 0) {
          return i
        }
        if (item.arrivalQty.indexOf(inputvalue) == 0) {
          return i
        }
        // if (item.unArrivalQty.indexOf(inputvalue) == 0) {
        //   return i
        // }
        // if (item.remarks.indexOf(inputvalue) == 0) {
        //   return i
        // }
      }
      return -1
    },
    // 找到输入框的值与提示框匹配的值
    findProduct(inputvalue, pipei_product) {
      var value = ''
      for (const key in pipei_product) {
        if (pipei_product[key].indexOf(inputvalue) == 0) {
          this.value = pipei_product[key]
          break
        }
      }
      return this.value
    },

    // 获取提示框当前选择的行数据
    activeMark(index) {
      this.tipSpList.mark = index
      this.selecSptListData = this.tipSpList.listData[index]
    },
    // 替换展示提示框当前选择的行数据
    selectMark() {
      this.tipSpList.displaySta = 'none' // 隐藏提示框
      if (this.TableConfig.tableData.length) {
        for (let i = 0; i < this.TableConfig.tableData.length; i++) {
          if (this.TableConfig.tableData[i].goodsId === this.selecSptListData.id) {
            this.$elMessage.error('不能重复选择商品！')
            return
          }
        }
      }
      // 在获取商品后，事件发射到父组件通知父组件来处理数据字段名不统一问题
      this.$emit('onHandleSpData', this.TableConfig.tableData, this.tableIndex, this.selecSptListData)
    },
    // 添加一行数据
    addRow(event, index) {
      if (this.dataLoading) {
        return
      }
      this.setDataLoading()
      let obj = {}
      for (const key in this.TableConfig.columnData) {
        if (key !== 'idx') {
          obj[key] = ''
        }
      }
      for (let i = 0; i < this.TableConfig.tableData.length; i++) {
        if (index === i) {
          this.TableConfig.tableData.splice(i + 1, 0, obj)
        }
      }
      // let trDown = event.target.parentNode.parentNode.parentNode.parentNode.nextElementSibling // 当前选中的下一行
      // setTimeout(() => {
      // this.findinput(trDown.children[3]).select()
      // }, 300)
      this.$emit('onAddRow', this.TableConfig.tableData)
    },
    // 删除当前行数据
    deleteRow(index) {
      if (this.dataLoading) {
        return
      }
      if(this.isRadio){
        this.$emit('showDeleteTip',true,index)
        return
      }
      // this.setDataLoading()
      this.$emit('onDeleteRowPlus', this.TableConfig.tableData[index])
      if (this.TableConfig.tableData.length === 1) {
        let obj = {}
        let item = this.TableConfig.tableData[0]
        for (const key in this.TableConfig.columnData) {
          if (['idx'].includes(key)) {
            obj[key] = item[key]
          } else {
            obj[key] = ''
          }
        }
        this.TableConfig.tableData = [obj]
        return
      }
      this.TableConfig.tableData.splice(index, 1)
      console.log(8888, this.TableConfig.tableData)
      this.$emit('onDeleteRow', this.TableConfig.tableData)
    },
    setDataLoading() {
      this.dataLoading = true
      setTimeout(() => {
        this.dataLoading = false
      }, 200)
    },
  },
}
</script>

<style lang="scss" scoped>
.inpu_checkbox {
  width: 60px;
  height: 16px;
  background: pink;
  border-color: #dcdfe6;
}
.resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 3px;
  height: 100%;
  cursor: col-resize;
}
.table_div {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  overflow: auto;

  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  &::-webkit-scrollbar-thumb {
    background: #c9c9c9;
  }

  &::-webkit-scrollbar-track {
    background: #e5e5e5;
  }

  ::v-deep .el-select {
    height: 100%;
    box-sizing: border-box;
    display: table;
    .el-input {
      height: 100%;

      .el-input__inner {
        height: 100%;
        font-size: 12px;
        border-radius: 0;
        padding: 0 5px;
        border: none;
      }

      .el-input__suffix {
        height: 100%;
        display: flex;
        align-items: center;
      }

      .el-textarea {
        height: 100%;
        // width: 30px;
      }
    }
  }
}

.table_style {
  width: 100%;
  height: 100%;
  border-spacing: 0;
  border-collapse: unset;

  tbody {
    display: block;
    height: calc(100% - 60px);
    overflow-y: scroll;

    tr {
      position: relative;
      background: #fff;
      box-sizing: border-box;

      td {
        position: relative;
        text-align: center;
        // border-top: 1px solid #e3e3e3;
        border-right: 1px solid #e3e3e3;
        border-bottom: 1px solid #e3e3e3;
        // padding: 0 5px;
        height: 30px;
        box-sizing: border-box !important;
        padding: 0;

        input {
          display: table;
          border: none;
          height: 100%;
          width: 100%;
          // border: 1px solid #dcdfe6;
          // height: 24px;
          // width: calc(100% - 8px);
          padding: 0 5px;
          box-sizing: border-box;
          color: #666;
          font-size: 12px;
          // margin: 0 4px;

          &:focus {
            outline: none;
            border: 1px solid #1893fc;
          }

          &:focus + i {
            transform: rotate(180deg);
            transition: 0.3s all;
          }

          &::placeholder {
            color: #c9c9c9;
          }
        }

        ::v-deep .el-input {
          height: 100%;
          width: 100%;
          display: table;
          .el-input__inner {
            height: 100%;
            width: 100%;
            box-sizing: border-box;
            color: #666;
            font-size: 12px;
            background-color: #ffffff;
            border: none;
            padding: 0 5px;

            &:focus {
              outline: none;
              border-radius: 0;
              border: 1px solid #1893fc;
            }
          }
        }

        ::v-deep .el-input.is-disabled {
          height: 100%;
          width: 100%;

          .el-input__inner {
            height: 100%;
            width: 100%;
            box-sizing: border-box;
            color: #666;
            font-size: 12px;
            background-color: #ffffff;
            border: none;
            padding: 0;
          }
        }

        .inpu_checkbox {
          width: 60px;
          height: 16px;
          background: pink;
          border-color: #dcdfe6;
        }

        ::v-deep .el-date-editor {
          width: 100%;
          height: 100%;

          .el-input__inner {
            width: 100%;
            height: 24px;
            padding: 0 5px 0 5px;
            font-size: 12px;
            color: #666;
            border-radius: 0;
          }

          .el-input__prefix {
            left: unset;
            right: 0 !important;

            .el-input__icon {
              line-height: 24px;
              font-size: 12px;
            }
          }

          .el-input__suffix {
            display: none;
          }
        }

        .click_p {
          position: absolute;
          width: 40px;
          height: 100%;
          background: #1893fc;
          font-size: 12px;
          color: #fff;
          right: 0;
          top: 0;
          margin: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
        }

        .select_input {
          height: 21px;
          line-height: 21px;
          position: absolute;
          right: 6px;
          font-size: 12px;
          color: #c0c4cc;
          background: #fff;
          margin: 6px 0;
          padding: 0 2px;
        }

        .select_option,
        .select_option_ck {
          position: absolute;
          top: 22px;
          left: 5px;
          z-index: 999;
          min-width: 90px;
          max-height: 200px;
          background: #fff;
          display: flex;
          flex-direction: column;
          padding: 6px 0;
          border: 1px solid #e4e7ed;
          box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
          border-radius: 4px;
          display: none;
          overflow: auto;

          &::-webkit-scrollbar {
            width: 10px;
            height: 10px;
          }

          &::-webkit-scrollbar-thumb {
            background: #c9c9c9;
          }

          &::-webkit-scrollbar-track {
            background: #e5e5e5;
          }

          li {
            width: 100%;
            height: 34px;
            line-height: 34px;
            list-style-type: none;
            font-size: 14px;
            color: #666;
            background-color: #fff;
            padding: 0 20px;
            text-align: left;
            white-space: nowrap;

            &:hover {
              background-color: #f5f7fa;
            }
          }

          .select_li {
            color: #409eff;
            background-color: #f5f7fa;
            font-weight: 700;
          }
        }

        p {
          // font-size: 0.225014rem;
          font-size: 12px;
          color: #666;
          margin: 0;
          padding: 0 5px;
          text-align: left;
        }

        .colorRed {
          color: #ff0000;

          ::v-deep .el-input__inner {
            color: #ff0000 !important;
          }
        }

        .colorBlue {
          color: #1b94fb;

          ::v-deep .el-input__inner {
            color: #1b94fb !important;
          }
        }

        .colorGreen {
          color: #20a500;

          ::v-deep .el-input__inner {
            color: #20a500 !important;
          }
        }

        .colorBlack {
          color: #666;

          ::v-deep .el-input__inner {
            color: #666 !important;
          }
        }

        &:last-child {
          border-right: none;
        }
      }

      .first_td {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 !important;

        .first_td_button1 {
          width: 100% !important;
          display: flex;
          justify-content: center;

          p {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 1px solid #1893fc;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #1893fc;
            font-size: 12px;
            cursor: pointer;
            margin: 0;

            &:first-child {
              margin-right: 3px;
            }

            &:last-child {
              margin-left: 3px;
              border-color: #fb1919;
              color: #fb1919;

              span {
                margin-top: -0.056254rem;
              }
            }
          }
        }

        .first_td_button {
          width: 100% !important;
          display: flex;
          justify-content: center;

          i {
            font-size: 24px;
            padding: 3px 0;

            &:first-child {
              color: #1893fc;
            }

            &:last-child {
              color: #fd5050;
            }
          }
        }

        .first_td_p {
          width: 100%;
          height: 30px;
          line-height: 30px;
          // font-size: 0.225014rem;
          font-size: 12px;
          color: #666;
          text-align: center;
          margin: 0;
        }
      }
    }

    &::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }

    &::-webkit-scrollbar-thumb {
      background: #c9c9c9;
    }

    &::-webkit-scrollbar-track {
      background: #e5e5e5;
    }
  }

  .first_tr {
    width: 100%;
    height: 30px;
    background: #ededed;
    box-sizing: border-box;

    th {
      border-right: 1px solid #e3e3e3;
      border-bottom: 1px solid #e3e3e3;

      p {
        height: 30px;
        line-height: 30px;
        overflow: hidden;
        text-align: center;
        margin: 0;
        color: #666;
        // font-size: 0.225014rem;
        font-size: 12px;
      }
    }

    .star {
      color: #fb1919;
      margin-right: 0.056254rem;
    }

    :last-child {
      border-right: none;
    }
  }

  .last_tr {
    width: 100%;
    height: 30px;
    background: #ededed;
    box-sizing: border-box;

    td {
      box-sizing: border-box;
      padding: 0 0.187512rem;
      border-right: none;

      p {
        width: 100%;
        // font-size: 0.225014rem;
        font-size: 12px;
        color: #666;
        margin: 0;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 17px;
        opacity: 1;
      }

      &:first-child {
        text-align: center;
      }
    }
  }

  thead {
    display: block;
    height: 30px;
  }

  tfoot {
    display: block;
    height: 30px;
    position: absolute;
    bottom: 0;
  }
}

.bill_mask_view {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 10;
}

.active_backGround {
  background: #e3f6ff !important;
}
</style>  